<?php if (!defined("BASEPATH")) exit("No direct script access allowed"); ?>

<script type="text/javascript">
	Ext.onReady(function() {
	
		Ext.ns('Extamples');
		Extamples.CropWindowUi = Ext.extend(Ext.Window, {
		  title: '<?=$this->db->escape_str($this->lang->line("IMAGE_CROP"))?>',
		  width: 920,
		  height: 570,
		  modal: true,
		  initComponent: function() {
			this.fbar = {
			  xtype: 'toolbar',
			  items: [
				{
				  xtype: 'button',
				  text: '<?=$this->db->escape_str($this->lang->line("CANCEL"))?>',
				  ref: '../buttonCancel'
				},
				{
				  xtype: 'button',
				  text: '<?=$this->db->escape_str($this->lang->line("SAVE"))?>',
				  ref: '../buttonSave'
				}
			  ]
			};
			Extamples.CropWindowUi.superclass.initComponent.call(this);
		  }
		});

		Extamples.CropWindow = Ext.extend(Extamples.CropWindowUi, {
			cropData: null,
			imageUrl: '',
			e2iId: '',
			initComponent: function() {
			
			// I am using an image preloader here, for getting the initial height and width
			//
			Extamples.CropWindow.superclass.initComponent.call(this);
			var imgLoad = new Image();
			imgLoad.onload = (function(){
				this.setSize(imgLoad.width + 20, imgLoad.height + 70);
				var crop = new Ext.ux.ImageCrop({
					imageUrl: this.imageUrl,
					initialWidth: 660, //imgLoad.width,
					minWidth: 660,
					minHeight: 350,
					initialHeight: 350, //imgLoad.height,
					imgWidth: imgLoad.width,
					imgHeight: imgLoad.height,
					quadratic: false
				});
				this.cropData = crop.getCropData();
				crop.on('change', function(foo,x) {this.cropData = x;}, this);
				this.add(crop);
			}).createDelegate(this);
			imgLoad.src = this.imageUrl;
			
			// handler for the buttons
			this.buttonCancel.on('click', this.close, this);
			this.buttonSave.on('click', this.saveCrop, this);
		  },
		  saveCrop: function() {
			//Ext.get('output-2').update('X Offset: '+this.cropData.x+' Y Offset: '+this.cropData.y+' Width: '+this.cropData.width+' Height: '+this.cropData.height);

			Ext.Ajax.request({
				url: '<?=site_url()?>admin/image_crop/' + this.e2iId, //this.imageUrl,
				method: 'post',
				params: this.cropData,
				success: function(){
					if(this.fireEvent('save', this) === false){
						return this;
					}
					this.close();
				},
				scope: this
			});

		  }
		});
	
		var tpl = new Ext.XTemplate(
		'<tpl for=".">',
			'<div class="thumb-wrap" id="ID{e2iId}" style="border:1px solid #DDDDDD;">',
				'<div class="thumb"><img src="<?=MEDIA?>../uploads/{e2iImageNameThumb}" title="{e2iAlt}"></div>',
				'<div class="alt">{e2iResizedWidth} x {e2iResizedHeight}</div>',
				'<tpl if="e2iAlt!=\'\'"><div class="alt" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{e2iAlt}</div></tpl>',
				'<div class="alt"><?=$this->db->escape_str($this->lang->line("SLIDER"))?>: {e2iCroppedText}</div>',
				'<tpl if="insName"><div class="alt" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"><?=$this->db->escape_str($this->lang->line("UNIVERSITY"))?>:<br/>- {insName}</div></tpl>',
			'</div>',
		'</tpl>',
		'<div class="x-clear"></div>'
		);

		var store = new Ext.data.JsonStore({
			url: '<?=site_url()?>admin/get_ent2image/MAIN_SLIDER',
			root: 'images',
			fields: [
				'e2iId',
				'e2iCouId',
				'e2iCityId',
				'e2iInsId',
				'e2iMainSlider2InsId',
				'e2iImageName',
				'e2iImageNameOriginal',
				'e2iImageNameThumb',
				'e2iImageNameResized',
				'e2iAlt',
				'e2iWidth',
				'e2iHeight',
				'e2iThumbWidth',
				'e2iThumbHeight',
				'e2iResizedWidth',
				'e2iResizedHeight',
				'e2iCropped',
				'e2iImageNameCropped',
				'e2iCroppedText',
				'e2iHash',
				'insName',
				'insUrlName',
				'insPresenter'
			]
		});
		store.load();

		new Ext.Panel({
			renderTo: 'panel_main_slider',
			layout: 'fit',
			border: false,
			
			items:[{

						border: false,

						items: [

							new Ext.Panel({
								id:'images-view',
								border: false,
								anchor: '100%',
								autoHeight:true,
								layout:'fit',

								tbar: {
									items: [{
											icon: '<?=MEDIA?>icon/application_form_delete.png',
											text: '<?=$this->db->escape_str($this->lang->line("DELETE"))?>',
											ref: '../removeBtn',
											id: 'removeBtn',
											disabled: true,
											handler: function(){
												Ext.MessageBox.confirm('<?=$this->db->escape_str($this->lang->line("CONFIRMATION"))?>', '<?=$this->db->escape_str($this->lang->line("ARE_YOU_SURE_YOU_WOULD_LIKE_TO_DELETE_THE_IMAGE"))?>' , function(btn) {
													if(btn == 'yes') {
														var remove = '';
														for(var i = 0; i < Ext.getCmp('thumbDataView').getSelectedRecords().length; i++) {
															remove += ((remove != '')?('|'):('')) + Ext.getCmp('thumbDataView').getSelectedRecords()[i].data.e2iId;
														}
														Ext.Ajax.request({url: '<?=site_url()?>admin/ent2image_insert_update', params: 'del=1&e2iId=' + remove, success: function() {
															store.reload();
															}
														});
													}
												});
											}
										}, {
											icon: '<?=MEDIA?>icon/application_form_add.png',
											text: '<?=$this->db->escape_str($this->lang->line("ADD_EDIT_TEXT"))?>',
											ref: '../addBtn',
											id: 'addBtn',
											disabled: true,
											handler: function(){

												Ext.MessageBox.show({
													title: '<?=$this->db->escape_str($this->lang->line("ADD_EDIT_TEXT"))?>',
													msg: '<?=$this->db->escape_str($this->lang->line("TEXT"))?>:',
													width:300,
													buttons: Ext.MessageBox.OKCANCEL,
													multiline: true,
													value: Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iAlt,
													fn: function(btn, text) {
														if(btn == 'ok') {
															var add = '';
															for(var i = 0; i < Ext.getCmp('thumbDataView').getSelectedRecords().length; i++) {
																add += ((add != '')?('|'):('')) + Ext.getCmp('thumbDataView').getSelectedRecords()[i].data.e2iId;
															}
															Ext.Ajax.request({url: '<?=site_url()?>admin/ent2image_insert_update', params: 'e2iId=' + add + '&e2i_alt=' + text, success: function() {
																store.reload();
																}
															});
														}
													}
											 });

											}
										}, new Ext.Button({
											icon: '<?=MEDIA?>icon/image_edit.png',
											ref: '../cropBtn',
											id: 'cropBtn',
											disabled: true,
											text: '<?=$this->db->escape_str($this->lang->line("IMAGE_CROP"))?>',
											handler: function() {
											//getting the image URL from whereever you want
											var cw = new Extamples.CropWindow({
												imageUrl: '<?=UPLOADS?>' + Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iImageNameResized,
												e2iId: Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iId,
												listeners:{
													save: function(){
													  // handler if a crop was successfull, and the window was closed
													  store.reload();
													},
													scope: this
												}
											});
											cw.show();
										  }
										}), new Ext.Button({
											icon: '<?=MEDIA?>icon/application_form_delete.png',
											ref: '../removecropBtn',
											id: 'removecropBtn',
											disabled: true,
											text: '<?=$this->db->escape_str($this->lang->line("REMOVE_FROM_SLIDER"))?>',
											handler: function() {
												if(Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iCropped == "I") {
													Ext.Ajax.request({url: '<?=site_url()?>admin/image_crop/' + Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iId, params: 'remove=1', success: function() {
														store.reload();
														}
													});
												}
										  }
										}), {
											icon: '<?=MEDIA?>icon/attach.png',
											text: '<?=$this->db->escape_str($this->lang->line("ATTACH_UNIVERSITY"))?>',
											ref: '../attachBtn',
											id: 'attachBtn',
											disabled: true,
											handler: function(){


												winInstituteAttach = new Ext.Window({
													iconCls: 'application_form_add',
													bodyStyle: 'background-color:white',
													autoScroll: true,
													maximized: false,
													modal: true,
													width:300,
													floating: true,
													minWidth: 300,
													height:150,
													minHeight: 150,
													closeAction:'close',
													maximizable: false,
													title: '<?=$this->db->escape_str($this->lang->line("ATTACH_UNIVERSITY"))?>',

													listeners: {
														close: function() {
															
														}
													},

													items:[{

																border: false,

																items: attachInstituteForm = new Ext.FormPanel({
																	padding: 10,
																	labelAlign: 'right',
																	labelWidth: 100,
																	autoHeight: true,
																	autoWidth: true,
																	border: false,
																	defaultType: 'textfield',
																	waitMsgTarget: true,
																	items: [{
																			hidden: true,
																			inputType: 'hidden',
																			name: 'e2i_id',
																			value: Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iId
																		}, {
																			xtype:'fieldset',
																			title: '<?=$this->db->escape_str($this->lang->line("UNIVERSITY"))?>',
																			autoHeight:true,
																			layout: {
																				type: 'anchor'
																			},
																			items: new Ext.form.ComboBox({
																				fieldLabel: '<?=$this->db->escape_str($this->lang->line("UNIVERSITY"))?>',
																				hiddenName:'e2i_main_slider_2_ins_id',
																				store: new Ext.data.ArrayStore({
																					fields: ['ins_id', 'ins_name', 'ins_url_name', 'ins_city_id', 'ins_priority', 'city_name', 'cou_name'],
																					url: '<?=site_url()?>admin/get_institute/1',
																					autoLoad: true
																				}),
																				valueField:'ins_id',
																				displayField:'ins_name',
																				tpl: '<tpl for="."><div class="x-combo-list-item">{ins_name} ({city_name} - {cou_name})</div></tpl>',
																				editable: true,
																				forceSelection: true,
																				typeAhead: true,
																				mode: 'local',
																				triggerAction: 'all',
																				emptyText:'...',
																				value: Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.insName,
																				hiddenValue: Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iMainSlider2InsId,
																				selectOnFocus:true,
																				allowBlank: true,
																				anchor:'100%'
																			})
																		}
																	]

																})

															}

														],

														bbar: {
															items: [{
																text: '<?=$this->db->escape_str($this->lang->line("SAVE"))?>',
																handler: function() {
																	if(attachInstituteForm.getForm().isDirty()) {
																		attachInstituteForm.getForm().submit({
																			url: '<?=site_url()?>admin/attach_institute',
																			success: function(form, resp){
																				winInstituteAttach.close();
																				store.reload();
																			}
																		});
																	} else {
																		winInstituteAttach.close();
																	}
																},
																icon: '<?=MEDIA?>icon/disk.png'
															}, {
																xtype: 'tbseparator'
															},{
																text: '<?=$this->db->escape_str($this->lang->line("CANCEL"))?>',
																handler: function() {
																	winInstituteAttach.close();
																},
																icon: '<?=MEDIA?>icon/cancel.png'
															}, {
																xtype: 'tbseparator'
															},{
																text: '<?=$this->db->escape_str($this->lang->line("RESET"))?>',
																handler: function() {
																	attachInstituteForm.getForm().reset();
																}
															}],
															buttonAlign : 'right'
														}

												});
												winInstituteAttach.show(this);


											}
										}
									]
								},

								items: new Ext.DataView({
									store: store,
									autoHeight:true,
									tpl: tpl,
									id: 'thumbDataView',
									multiSelect: true,
									overClass:'x-view-over',
									itemSelector:'div.thumb-wrap',

									listeners: {
										selectionchange: {
											fn: function(dv,nodes){

												Ext.getCmp('removeBtn').setDisabled(nodes.length < 1);

												Ext.getCmp('addBtn').setDisabled(nodes.length != 1);
												if(Ext.getCmp('addBtn').disabled)
													Ext.getCmp('addBtn').hide();
												else
													Ext.getCmp('addBtn').show();

												Ext.getCmp('attachBtn').setDisabled(nodes.length != 1);
												if(Ext.getCmp('attachBtn').disabled)
													Ext.getCmp('attachBtn').hide();
												else
													Ext.getCmp('attachBtn').show();

												Ext.getCmp('cropBtn').setDisabled(nodes.length != 1 || Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iResizedWidth < 660 || Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iResizedHeight < 350);
												if(Ext.getCmp('cropBtn').disabled)
													Ext.getCmp('cropBtn').hide();
												else
													Ext.getCmp('cropBtn').show();

												Ext.getCmp('removecropBtn').setDisabled(nodes.length != 1 || Ext.getCmp('thumbDataView').getSelectedRecords()[0].data.e2iCropped != "I");
												if(Ext.getCmp('removecropBtn').disabled)
													Ext.getCmp('removecropBtn').hide();
												else
													Ext.getCmp('removecropBtn').show();

											}
										}
									}

								})
							}),

							new Ext.FormPanel({
								padding: 3,
								labelAlign: 'right',
								labelWidth: 100,
								autoHeight: true,
								autoWidth: true,
								border: false,
								defaultType: 'textfield',
								waitMsgTarget: true,
								items:	
									new AwesomeUploader({
										awesomeUploaderRoot: '<?=MEDIA?>awesomeuploader/',
										uploadUrl: '<?=site_url()?>admin/file_upload',
										flashUploadUrl: '<?=site_url()?>admin/file_upload',
										extraPostData: {ENTITY: 'MAIN_SLIDER', ID: -1},
										frame: true,
										border: false,
										disableFlash: true,
										gridHeight: 130,
										anchor: '100%',
										height:200,
										listeners: {
											fileupload: function() {
												store.reload();
											}
										}
									})
							})

				]

			}]

		})

			})
</script>


<div id="panel_main_slider"></div>